<template>
  <div class="app-container">
    <div class="flex w-full overflow-hidden">

      <!-- 数据表 -->
      <div class="flex-grow min-w-0 transition-all duration-300 ease-in-out">
        <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
        </vxe-grid>
      </div>
    </div>

    <!-- 额外组件 -->
    <AddModule 
      ref="addRef" 
      :api="API" 
      :options="selectOption"
      @reload="gridRef?.commitProxy('query')"
    />
    <UpdateModule 
      ref="updateRef" 
      :api="API" 
      :options="selectOption"
      @reload="gridRef?.commitProxy('query')"
    />
    <DetailModule 
      ref="detailRef" 
      :api="API" 
      :options="selectOption" 
    />


  </div>
</template>
<script setup>
import API from '@/api/admin/admin/notice';
import { useTable } from './useTable';

import AddModule from './add.vue';
import UpdateModule from './update.vue';
import DetailModule from './detail.vue';


// 自定义配置
const customConfig = {
  pagerConfig: {
    pageSize: 15,
  },
};

// 表格引用、配置、及初始化函数
const tableId = 'AdminNotice';
const {
  // 组件引用
  gridRef,
  addRef,
  updateRef,
  detailRef,

  // 本菜单选项
  selectOption,

  // 数据表配置
  gridOptions,
  gridEvents,
} = useTable({ API, tableId, customConfig });

// 页面加载时执行
onMounted(async () => {});

// 组件选项
defineOptions({
  name: tableId,
  inheritAttrs: false,
});
</script>